<template>
    <div class="app" id="cores">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datare">
                  <div class="top_o">
                    <div class="con_a">
                      <div class="top_con_1">
                        <img :src="inuser.icon" alt="">
                        <div><span>{{inuser.nickName}}</span></div>
                        <div class="flex_lr">
                          <div class="cococ" @click="zhanghao">账号管理</div>
                          <div class="cococ" @click="qinchulo">退出</div>
                        </div>
                      </div>
                      <div class="top_con_2">
                        <div class="eng flex_lr">
                          <div><img src="@/assets/img/dji.png" alt=""> 等级：<span>{{inuser.levelName}}会员</span></div>
                          <div><img src="@/assets/img/jifen.png" alt=""> 会员积分：<span>{{inuser.integral}}</span>分</div>
                        </div>
                        <div class="wwweeeeeee">
                          <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
                           <div class="flex_lr">
                             <div>2000</div>
                             <div>4000</div>
                           </div>
                        </div>
                      </div>
                      <div class="top_con_3">
                        <div class="lqiand" v-if="lqiands" @click="lqiandao()">签到</div>
                        <div class="lqiand" v-if="!lqiands" style="background-color:rgb(193,193,193)">已签到</div>
                        <div class="engko_a">
                          <div class="flex_lr">
                            <div><img src="@/assets/img/zhu.png" alt=""> 账户资金: ￥<span>{{inuser.money}}</span></div>
                            <div @click="dialogVisible = true" class="buenn">提现</div>
                          </div>
                          <div class="flex_lr">
                            <div><img src="@/assets/img/sho.png" alt="">我的收货地址</div>
                            <div class="buenn"> <router-link to='/co12'>查看</router-link></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="top_s">
                    <div class="txt" @click=tiaoz(1)><img src="@/assets/img/r1.png" alt="">待付款 </div>
                    <div class="txt" @click=tiaoz(2)><img src="@/assets/img/r1.png" alt=""> 待发货</div>
                    <div class="txt" @click=tiaoz(3)><img src="@/assets/img/r1.png" alt=""> 待收货</div>
                    <div class="txt" @click=tiaoz(4)><img src="@/assets/img/r2.png" alt="">待评价</div>
                    <div class="txt" @click=tiaoz(5)><img src="@/assets/img/r3.png" alt=""> 全部订单</div>
                  </div>
                  <div class="top_LR">
                    <div class="con_L">
                      <div class="cenn">
                        <h4>数据中心</h4>
                      </div>
                      <div class="coenen">
                        <div class="ww ee">
                          <div class="aww">
                            <div class="wa-cien">
                              <img src="@/assets/img/aa.png" alt="">
                            </div>
                            <div class="box q_q">
                              <h5>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h5>
                              <p>2019-11-21    16:25:16  </p>
                            </div>
                            <div class="box q_q">
                              <div>查看物流详情</div>
                              <p>到达武汉市货运中心</p>
                            </div>
                          </div>
                        </div>
                        <div class="ww ee">
                            <div class="aww">
                            <div class="wa-cien">
                              <img src="@/assets/img/aa.png" alt="">
                            </div>
                            <div class="box q_q">
                              <h5>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h5>
                              <p>2019-11-21    16:25:16  </p>
                            </div>
                            <div class="box q_q">
                              <div>查看物流详情</div>
                              <p>到达武汉市货运中心</p>
                            </div>
                          </div>
                        </div>
                        <div class="ww ee">
                            <div class="aww">
                            <div class="wa-cien">
                              <img src="@/assets/img/aa.png" alt="">
                            </div>
                            <div class="box q_q">
                              <h5>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h5>
                              <p>2019-11-21    16:25:16  </p>
                            </div>
                            <div class="box q_q">
                              <div>查看物流详情</div>
                              <p>到达武汉市货运中心</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="con_R ">
                         <div class="column">
                          <div class="item item1">
                            <div class="top_inko">
                              <img src="@/assets/img/免费.png" alt="">
                              <p>免费体验活动</p>
                            </div>
                            <div class="flex_lr on_eng">
                              <div @click="lwdhd(1)">申请中</div>
                              <div @click="lwdhd(2)">申请成功</div>
                            </div>
                          </div>
                          <div class="item item1">
                            <div class="top_inko">
                              <img src="@/assets/img/免费.png" alt="">
                              <p>价格竞猜活动</p>
                            </div>
                            <div class="flex_lr on_eng">
                              <div @click="lwdhd(3)">参与中</div>
                              <div @click="lwdhd(4)">中奖活动</div>
                            </div>
                          </div>
                        </div>
                        <div class="column">
                          <div class="item item1">
                            <div class="top_inko">
                              <img src="@/assets/img/免费.png" alt="">
                              <p>新品首发活动</p>
                            </div>
                            <div @click="lwdhd(6)" class="flex_lr on_eng">
                              <div>尾款待支付</div>
                              <div>已预定</div>
                            </div>
                          </div>
                          <div class="item item1">
                            <div class="top_inko">
                              <img src="@/assets/img/免费.png" alt="">
                              <p>我的体验报告</p>
                            </div>
                            <div class="flex_lr on_eng">
                              <div @click="lwdhd(5)">待填写</div>
                              <div @click="lwdhd(5)">评优报告</div>
                            </div>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="guanhg">
                 <div class="xinrzx">新人专享</div>
                 <div class="conenn_h">
                  <div class="xingr">
                    <div class="e_l">
                      <div class="thiser">
                        <div class="ss_jom">
                          <div class="topimg"><img src="@/assets/img/aa.png" alt=""></div>
                          <div class="txt">
                            <div class="flex_lr">
                              <div class="mfty">免费体验</div>
                              <div class="adawdgvvb">
                                <div>兰蔻小黑瓶眼霜精华</div>
                                <div class="flex_lr dwede">
                                  <div><p>活动数量：20份</p></div>
                                  <div>更多></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="thiser"></div>
                      <div class="thiser"></div>
                      <div class="thiser"></div>
                    </div>
                  </div>
                 </div>
              </div>
            </div>
        </div>
        <Footer/>
        <!-- 选择银行卡或者微信 -->
        <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="lheds">提示</div>
          <div class="lbody">
            <div class="lbodyb" :class="{lactive:1==lshuj}" @click='lxuanz(1)'>提现到银行卡</div>
            <div class="lbodyb" :class="{lactive:2==lshuj}" @click='lxuanz(2)'>提现到微信</div>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisible = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到微信 -->
        <el-dialog
          :visible.sync="dialogVisiblewx"
          width="30%"
          :before-close="handleClosewx">
          <div class="lheds">提现到微信</div>
          <div class="lbodywx">
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" :placeholder="holder" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到银行卡 -->
        <el-dialog
          :visible.sync="dialogVisibleyh"
          width="30%"
          :before-close="handleCloseyhk">
          <div class="lheds">提现到银行卡</div>
          <div class="lbodywx">
            <div class="lyhk">
              <div class="lyhkb">
                <div class="lyhkbb">
                  <p>中国农业银行</p>
                  <p style="text-align: center;">622 **** **** 1546</p>
                  <p style="text-align: right;">解除绑定</p>
                </div>
              </div>
            </div>
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import axios from 'axios'
export default {
    components: {
    Header,
    Footer,
    coreL
    },
    data() {
      return {
       inuser:'',
       luserId:"",
       dialogVisible: false,
       dialogVisiblewx: false,
       dialogVisibleyh: false,
       lqiands:true,
       lshuj:0,
       holder:""
      }
    },
    mounted() {
      this.holder="可提现金额"+this.lshuj
      let nameid = localStorage.name
      this.usernameid = nameid
      this.userdata()
      // if(!localStorage.name) {
      //   this.$router.push({path:'/SignIn'})
      // }
    },
    methods: {
      lqiandao(){
        let that = this
        axios({
          method: 'post',
          url:'http://47.105.66.232:8066/base/check/addCheck',
          params: {
            userId:that.luserId
          } })
        .then(res=> {
          this.lqiands=false;
          this.$message({
            message: '签到成功',
            type: 'success'
          });
        })
        .catch(function(err){
          console.log(err)
          this.$message({
            showClose: true,
            message: '签到失败',
            type: 'error'
          });
        })  
      },
      lxuanz(ax){
        this.lshuj=ax;
        if(ax==2){
          this.dialogVisiblewx=true
        }else if(ax==1){
          this.dialogVisibleyh=true
        }
      },
      handleClosewx(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleCloseyhk(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      tiaoz(id){
        this.$router.push("/co11?id=" + id)
      },
      lwdhd(aa){
        if(aa==1){
          this.$router.push("/co21")
        }else if(aa==2){
          this.$router.push("/co22")
        }else if(aa==3){
          this.$router.push("/co23")
        }else if(aa==4){
          this.$router.push("/co24")
        }else if(aa==5){
          this.$router.push("/co25")
        }else if(aa==6){
          this.$router.push("/co11")
        }
      },
      async userdata() {
           
      },
      zhanghao() {
        this.$router.push({path:'/co31'})
      },
      qinchulo() {
        localStorage.removeItem("eleToken")
        localStorage.removeItem("name")
        localStorage.removeItem("username")
        this.$router.push({path:'/index1'})
      }
    },
}
</script>
<style>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
#cores .top_con_1 .cococ:hover {
  background-color: #ff9381;
  color: #fff;
  cursor: pointer;
  border: 1px solid #ff9381;
}
#cores .flex_lr {
  display: flex;
  justify-content: space-between;
}
#cores .box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#cores .back {
    background-color: #f06048
}
#cores .pxes {
  height: 15px;
}
#cores .back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
#cores .listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
#cores .datare {
  height: 635px;
  width: 930px;
  border-radius: 6px;
}

#cores .top_o {
	width: 925px;
	height: 157px;
	background-color: #ffffff;
	border-radius: 6px;
}
#cores .top_o .con_a {
  width: 836px;
	height: 132px;
  margin: 0px auto;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
#cores .top_con_1 {
  width: 160px;
  height: 132px;
  text-align: center;
  line-height: 24px;
}
#cores .top_con_1 img{
  width: 76px;
  height: 76px;
  border-radius: 50%;
}
#cores .top_con_1 span {
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #000;
}
#cores .top_con_1 .flex_lr div {
  width: 70px;
	height: 23px;
	border-radius: 4px;
	border: solid 1px #a0a0a0;
  font-family: SourceHanSansCN-Regular;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a0a0a0;
}
#cores .top_con_2 {
  width: 380px;
  height: 100px;
  margin-top: 15px
}
#cores .top_con_2 .wwweeeeeee{
  margin-top: 30px;
}
#cores .top_con_2 .wwweeeeeee div {
  color: #c5c5c5;
}
#cores .top_con_2 .eng div {
  width: 175px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
	color: #000;
}
#cores .top_con_3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: -11px
}
#cores .top_con_3 span {
  color: #e60012;
  font-size: 22px
}
#cores .top_con_2 img{
   transform:translateY(4px)
}
#cores .top_con_3 img{
   transform:translateY(4px)
}
#cores .engko_a div{
margin-top: 14px
}
#cores .top_con_3 .buenn{
  	width: 93px;
	height: 28px;
	background-color: #f06048;
	border-radius: 6px;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  color: #fff
}
#cores .top_con_3 .buenn a {
  color: #fff
}
#cores .top_con_3 .buenn a:hover {
  color: #fff
}
#cores .top_s {
  	width: 925px;
	height: 88px;
	background-color: #ffffff;
	border-radius: 6px;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
#cores .top_s .a_ten {
  width: 135px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-family: SourceHanSansCN-Bold;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  border-right: 1px solid #333
}
#cores .top_s .txt {
  width: 210px;
  height: 35px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  display: flex;
  margin-top: -14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#cores .top_s .txt:hover{
  color: #f06048;
}
#cores .top_LR{
  width: 925px;
  height: 348px;
	border-radius: 6px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
#cores .con_L {
	width: 452px;
	height: 348px;
	background-color: #ffffff;
	border-radius: 6px;
}
#cores .con_L .cenn {
  height: 48px;
}
#cores .con_L .fo_e {
  width: 573px;
  height: 270px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

}
#cores .coenen .aww .q_q {
  width: 160px;
}
#cores .coenen .aww .q_q h5 {
  width: 160px;
}
#cores .coenen .aww .q_q p {
  width: 160px;
}
#cores .coenen .aww .q_q div{
  width: 127px;
	height: 29px;
  line-height: 29px;
  text-align: center;
	background-color: #a0a0a0;
	border-radius: 15px;
  color: #fff;
}
#cores .coenen .aww .q_q {
  margin-left: 25px;
}
#cores .wa-cien {
  width: 58px;
	height: 58px;
}
#cores .wa-cien img{
  width: 58px;
	height: 58px;
}
#cores .coenen {
  width: 452px
}
#cores .coenen .aww {
  display: flex;
  justify-content: space-between;
}
#cores .coenen .ww {
  height: 100px;
  border-bottom: 1px solid #b9b9b9
}
#cores .coenen .ww:nth-child(3){
  border-bottom: 1px solid #fff
}
#cores .coenen .ee {
  display: flex;
  justify-content: center;
  align-items: center;

}
#cores .coenen .ee div{
	width: 406px;
	height: 60px;
}
#cores .con_L .fo_e div p {
  font-size: 14px;
	color: #a0a0a0;
}
#cores .con_L .cenn h4{
  font-size: 24px;
  color: #313131;
  height: 54px;
  line-height: 55px;
  padding-left: 21px;
  text-align: left;
  border-bottom: 1px solid #b9b9b9;
}
#cores .con_R {
	width: 452px;
	height: 348px;
	background-color: #ffffff;
	border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
#cores .item{
  width: 220px;
  height: 168px;
  box-sizing: border-box;
}
#cores .item:hover {
border: solid 1px #f06048;
}
#cores .item1 .on_eng div:hover{
	border-top: solid 1px #c5c5c5;
  border-right: solid 1px #c5c5c5;
  border-left: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
}
#cores .item1 .on_eng {
box-sizing: border-box;
border: 1px solid #fff;
}
#cores .item1 .on_eng div{
  box-sizing: border-box;
}
#cores .top_inko {
  width: 110px;
  height: 80px;
  margin: 20px auto;
  text-align: center;
}
#cores .item1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #fff;
}
#cores .item1 .flex_lr {
  width: 216px;
	height: 55px;
  line-height: 58px;
  margin: -5px auto;
  text-align: center;
  box-sizing: border-box;

 }
#cores .con_R .column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
#cores .item1 .flex_lr div {
  width: 108px;
	height: 49px;
  line-height: 58px;
  text-align: center;
  border: 1px solid #fff;
  cursor: pointer;
}

#cores .guanhg {
  width: 1200px;
	height: 260px;
	background-color: #eee;
	border-radius: 6px;
  margin: 0 auto;
}
#cores .guanhg .conenn_h {
  width: 925px;
	height: 235px;
	background-color: #fff;
	border-radius: 6px;
  margin: 15px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  margin-right: 25px;
}
#cores .xinrzx{
  float: left;
  width: 215px;
  height: 215px;
  margin-left: 20px;
  background-color: #eb9595;
  margin-top: 25px;
  line-height: 215px;
  text-align: center;
  color: white;
}
#cores .conenn_h .xingr {
  width: 900px;
	height: 213px;
  display: flex;
  justify-content: space-between;
}
#cores .conenn_h .xingr .e_l {
  width: 890px;
	height: 213px;
  display: flex;
  justify-content: space-between;
}
#cores .conenn_h .xingr .e_l .thiser{
  width: 211px;
	height: 210px;
	border: solid 2px #eeeeee;
}
#cores .thiser .ss_jom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#cores .ss_jom .topimg img{
  width: 211px;
	height: 146px;
}
#cores .mfty {
  width: 23px;
  height: 60px;
  padding-left: 6px;
  padding-top: 8px;
  margin-top: -21px;
  margin-left: -18px;
	background-color: #f06048;
  writing-mode:vertical-lr;
  color: #fff
}
#cores .txt .dwede{
  line-height: 28px;
  width: 155px;
}
#cores .txt .adawdgvvb {
  margin-left: 10px;
}
#cores .el-dialog__header{
  padding: 0px !important;
}
#cores .el-dialog__body{
  padding: 0px !important;
}
#cores .lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
#cores .lbody{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
#cores .lbodyb{
  width: 40%;
  border: solid 1px rgb(160, 160, 160);
  height: 76px;
  line-height: 76px;
  text-align: center;
  margin: 30px 0px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: rgb(160, 160, 160);
}
#cores .lactive{
  border: solid 1px rgb(240, 96, 72);
  color: rgb(240, 96, 72);
}
#cores .lbodywx{
  width: 80%;
  margin: 0 auto;
}
#cores .lbodywx .el-input__inner{
  height: 20px;
}
#cores .el-row {
    margin: 20px 0px;
}
#cores .lyhk{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#cores .lyhkb{
  width: 40%;
  height: 97px;
  margin-top: 15px;
  border: solid 1px rgb(240, 96, 72);
}
#cores .lyhkbb{
  width: 90%;
  height: 77px;
  margin:10px auto;
  border-radius: 3px;
  background-color: rgb(137,201,151);
}
#cores .lqiand{
  width: 93px;
  height: 28px;
  border-radius: 14px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 28px;
}
</style>
